<template>
    <el-card class="cardClass">
        <div slot="header" class="cardClass_header">
            <h3>出入库管理</h3>
            <div>
                <el-button size="mini" type="primary" icon="el-icon-search" @click="searchHidden()">搜索</el-button>
            </div>
        </div>
        <!-- 查询 -->
        <el-collapse-transition>
            <el-form :model="ruleForm" :inline="true" :rules="rules" ref="ruleForm" label-width="80px" v-if="hidden">
                <el-form-item label="字段：" prop="key">
                    <el-select v-model="ruleForm.key" placeholder="请选择查询字段" size="small">
                        <el-option v-for="item in keyOptions" :key="item.value" :label="item.label"
                            :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="值：" prop="value">
                    <el-input v-model="ruleForm.value" placeholder="请输入值" size="small" clearable></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm('ruleForm')" size="small"
                        icon="el-icon-search">查询</el-button>
                    <el-button @click="resetForm('ruleForm')" size="small" icon="el-icon-refresh">重置</el-button>
                </el-form-item>
            </el-form>
        </el-collapse-transition>
        <!-- 库房tab -->
        <el-tabs type="border-card" v-model="activeName1" @tab-click="handleClick" style="min-height: calc(100vh - 200px);"
            ref="tabRef">
            <el-tab-pane label="一号仓库" name="1">
                <!-- 表格开始 -->
                <el-table :data="tableData1" stripe size="small" border style="width: 100%">
                    <el-table-column prop="id" type="index" label="序号" width="60px" align="center"></el-table-column>
                    <el-table-column prop="danjubianhao" label="单据编号" align="center"></el-table-column>
                    <el-table-column prop="cangkumingc" label="仓库名称" align="center"></el-table-column>
                    <el-table-column prop="cangkuleixing" label="仓库类型" align="center"></el-table-column>
                    <el-table-column prop="gonghuodanwei" label="供货单位" align="center"></el-table-column>
                    <el-table-column prop="rukuriqi" label="入库日期" align="center"></el-table-column>
                    <el-table-column prop="chuliriqi" label="处理日期" align="center"></el-table-column>
                    <el-table-column prop="caozuoren" label="操作人" align="center"></el-table-column>
                    <el-table-column prop="jine" label="金额" align="center"></el-table-column>
                    <el-table-column label="操作" align="center" width="300">
                        <template slot-scope="scope">
                            <el-button type="primary" size="mini" icon="el-icon-upload2"
                            @click="open('出库', scope.row)">出库</el-button>
                            <el-button type="success" size="mini" icon="el-icon-download"
                            @click="open('入库')">入库</el-button>
                            <el-button type="danger" size="mini" icon="el-icon-delete"
                                @click="del(scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <!-- 分页 -->
                <el-pagination background layout="total, prev, pager, next, jumper" 
                    :total="total" :page-size="ruleForm.pageSize" @current-change="changePage"
                    :current-page="ruleForm.pageNum" class="pageClass"></el-pagination>
            </el-tab-pane>
            <el-tab-pane label="二号仓库" name="2">
                <!-- 表格开始 -->
                <el-table :data="tableData2" stripe size="small" border style="width: 100%">
                    <el-table-column prop="id" type="index" label="序号" width="60px" align="center"></el-table-column>
                    <el-table-column prop="a" label="单据编号" align="center"></el-table-column>
                    <el-table-column prop="b" label="仓库名称" align="center"></el-table-column>
                    <el-table-column prop="c" label="仓库类型" align="center"></el-table-column>
                    <el-table-column prop="d" label="供货单位" align="center"></el-table-column>
                    <el-table-column prop="e" label="入库日期" align="center"></el-table-column>
                    <el-table-column prop="f" label="处理日期" align="center"></el-table-column>
                    <el-table-column prop="g" label="操作人" align="center"></el-table-column>
                    <el-table-column prop="h" label="金额" align="center"></el-table-column>
                    <el-table-column label="操作" align="center" width="300">
                        <template slot-scope="scope">
                            <el-button type="primary" size="mini" icon="el-icon-upload2"
                                @click="del(scope.row)">出库</el-button>
                            <el-button type="success" size="mini" icon="el-icon-download"
                                @click="del(scope.row)">入库</el-button>
                            <el-button type="danger" size="mini" icon="el-icon-delete"
                                @click="del(scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <!-- 分页 -->
                <el-pagination background layout="total, prev, pager, next, jumper"  :total="20"
                    :page-size="10" :current-page="1" class="pageClass"></el-pagination>
            </el-tab-pane>
            <el-tab-pane label="三号仓库" name="3">
                <!-- 表格开始 -->
                <el-table :data="tableData2" stripe size="small" border style="width: 100%">
                    <el-table-column prop="id" type="index" label="序号" width="60px" align="center"></el-table-column>
                    <el-table-column prop="a" label="单据编号" align="center"></el-table-column>
                    <el-table-column prop="b" label="仓库名称" align="center"></el-table-column>
                    <el-table-column prop="c" label="仓库类型" align="center"></el-table-column>
                    <el-table-column prop="d" label="供货单位" align="center"></el-table-column>
                    <el-table-column prop="e" label="入库日期" align="center"></el-table-column>
                    <el-table-column prop="f" label="处理日期" align="center"></el-table-column>
                    <el-table-column prop="g" label="操作人" align="center"></el-table-column>
                    <el-table-column prop="h" label="金额" align="center"></el-table-column>
                    <el-table-column label="操作" align="center" width="300">
                        <template slot-scope="scope">
                            <el-button type="primary" size="mini" icon="el-icon-upload2"
                                @click="del(scope.row)">出库</el-button>
                            <el-button type="success" size="mini" icon="el-icon-download"
                                @click="del(scope.row)">入库</el-button>
                            <el-button type="danger" size="mini" icon="el-icon-delete"
                                @click="del(scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <!-- 分页 -->
                <el-pagination background layout="total, prev, pager, next, jumper"  :total="20"
                    :page-size="10" :current-page="1" class="pageClass"></el-pagination>
            </el-tab-pane>
            <el-tab-pane label="四号仓库" name="4">
                <!-- 表格开始 -->
                <el-table :data="tableData2" stripe size="small" border style="width: 100%">
                    <el-table-column prop="id" type="index" label="序号" width="60px" align="center"></el-table-column>
                    <el-table-column prop="a" label="单据编号" align="center"></el-table-column>
                    <el-table-column prop="b" label="仓库名称" align="center"></el-table-column>
                    <el-table-column prop="c" label="仓库类型" align="center"></el-table-column>
                    <el-table-column prop="d" label="供货单位" align="center"></el-table-column>
                    <el-table-column prop="e" label="入库日期" align="center"></el-table-column>
                    <el-table-column prop="f" label="处理日期" align="center"></el-table-column>
                    <el-table-column prop="g" label="操作人" align="center"></el-table-column>
                    <el-table-column prop="h" label="金额" align="center"></el-table-column>
                    <el-table-column label="操作" align="center" width="300">
                        <template slot-scope="scope">
                            <el-button type="primary" size="mini" icon="el-icon-upload2"
                                @click="del(scope.row)">出库</el-button>
                            <el-button type="success" size="mini" icon="el-icon-download"
                                @click="del(scope.row)">入库</el-button>
                            <el-button type="danger" size="mini" icon="el-icon-delete"
                                @click="del(scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <!-- 分页 -->
                <el-pagination background layout="total, prev, pager, next, jumper"  :total="20"
                    :page-size="10" :current-page="1" class="pageClass"></el-pagination>
            </el-tab-pane>
        </el-tabs>
        <addInboundOutbound ref="addInboundOutboundRef" @func='searchGoods'></addInboundOutbound>
    </el-card>
</template>

<script>
import addInboundOutbound from '@/components/material/addInboundOutbound';
import { queryAPI, deleteAPI } from '@/apis/material/inboundOutbound.js';

export default {
    name: "storeManagement",
    components: {
        addInboundOutbound
    },
    data() {
        return {
            total: null, // 分页
            loading: true, // 加载
            activeName1: "1",
            tableHidden: true, // 延迟表格加载    
            hidden: false, // 控制搜索表单显示状态  
            storehouse: null,
            tableData1: [],
            tableData2: [
                {
                    a: "1001",
                    b: "二号仓库",
                    c: "药物仓库",
                    d: "XXX供货商",
                    e: "2021-1-10",
                    f: "2021-5-12",
                    g: "王某某",
                    h: "1200元",
                },
                {
                    a: "1002",
                    b: "二号仓库",
                    c: "药物仓库",
                    d: "XXX供货商",
                    e: "2021-1-15",
                    f: "2021-4-12",
                    g: "王某某",
                    h: "3052元",
                },
                {
                    a: "1003",
                    b: "二号仓库",
                    c: "药物仓库",
                    d: "XXX供货商",
                    e: "2021-2-10",
                    f: "2021-3-12",
                    g: "王某某",
                    h: "1250元",
                },
                {
                    a: "1004",
                    b: "二号仓库",
                    c: "药物仓库",
                    d: "XXX供货商",
                    e: "2021-4-15",
                    f: "2021-5-17",
                    g: "王某某",
                    h: "2500元",
                },
                {
                    a: "1005",
                    b: "二号仓库",
                    c: "药物仓库",
                    d: "XXX供货商",
                    e: "2021-3-18",
                    f: "2021-4-14",
                    g: "王某某",
                    h: "3070元",
                },
            ],
            ruleForm: {
                key: 'danjubianhao',
                value: '',
                pageNum: 1,
                pageSize: 8,
            },
            keyOptions: [
                { value: 'danjubianhao', label: '单据编号' },
                { value: 'gonghuodanwei', label: '供货单位' },
            ],
            rules: {
                key: [{ required: true, message: '请选择查询字段', trigger: 'blur' }]
            },
        }
    },
    created() {
        // console.log(this);
    },
    provide() {
        return {
            searchGoods: this.searchGoods,
            open: this.open,
        }
    },
    mounted() {
        const _this = this;
        setTimeout(() => {
            _this.ruleForm.flag = _this.$refs.tabRef?.currentName
            _this.searchGoods()
        }, 100);
    },
    methods: {// 删除
        // 新增/修改弹窗
        open(title, row) {
            this.$refs.addInboundOutboundRef.show(title, row);
        },
        del(row) {
            console.log(row);
            const _this = this;
            _this
                .$confirm("确认删除？", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                })
                .then(() => {
                    deleteAPI(row.id).then(function (res) {
                        // console.log(res);
                        if (res.code === 0) {
                            _this.$message({
                                type: "success",
                                message: res.msg,
                            });
                            _this.search();
                            _this.ruleForm.pageNum = 1; // 查询重置页数
                        } else {
                            _this.$message({
                                type: "error",
                                message: res.msg,
                            });
                        }
                    });
                })
                .catch(() => { });
        },
        searchGoods() {
            const _this = this;
            queryAPI(_this.ruleForm).then(res => {
                _this.tableData1 = res.data;
                _this.total = res.total
            })
        },
        // 分页
        changePage(pageNum) {
            this.ruleForm.pageNum = pageNum;
            this.searchGoods()
        },
        // tab切换
        handleClick(tab) {
            this.ruleForm.flag = tab.name
            this.searchGoods();
            this.ruleForm.pageNum = 1
        },
        // 搜索隐藏
        searchHidden() {
            this.hidden = !this.hidden;

        },
        // 搜索
        submitForm(formName) {
            const _this = this;
            _this.$refs[formName].validate((valid) => {
                if (valid) {
                    _this.ruleForm.pageNum = 1 // 查询重置页数
                    _this.searchGoods(_this.ruleForm)
                }
            });
        },
        // 重置
        resetForm(formName) {
            this.$refs[formName].resetFields();
            this.searchGoods(_this.ruleForm)
            this.ruleForm.pageNum = 1 // 查询重置页数
        },
    }
}
</script>

<style scoped>
.table_top {
    display: flex;
    margin-bottom: 14px;
}

.table_top_inside {
    display: flex;
    align-items: center;
    margin: 0 25px 0 0;
}

.table_top_btn {
    margin-left: auto;
}

.table_top span {
    min-width: 50px;
}

/deep/ .el-card__body,
.el-main {
    padding: 16px;
}

.pageClass {
    float: right;
    margin: 15px 0px 5px;
}
</style>